<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import upMoreImg from "@/components/public/upMoreImg.vue";
import defUpImg from "@/components/public/defUpImg.vue";
import {
  AccreditationAdd,
  AccreditationEdit,
  AccreditationDetail,
} from "@/http/api";
export default {
  components: { outMain, upMoreImg, defUpImg },
  name: "",
  data() {
    const checkNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      detailId: this.$route.query.id,
      showCont: false,
      formData: {
        accreditation_cover: "",
        accreditation_name: "",
        accreditation_money: "",
        accreditation_czsj: "",
        accreditation_sycyfw: "",
        accreditation_blyq: "",
        accreditation_sxcl: "",
        accreditation_qzfs: [],
        accreditation_banner: "",
      },
      rules: {
        accreditation_cover: [
          {
            required: true,
            message: "请选择证件封面",
            trigger: "change",
          },
        ],
        accreditation_name: [
          {
            required: true,
            message: "请输入证件名称",
            trigger: "blue",
          },
        ],
        accreditation_money: [
          {
            validator: checkNumber,
            required: true,
            trigger: "blur",
          },
        ],
        accreditation_czsj: [
          {
            required: true,
            message: "请输入出证时间",
            trigger: "blue",
          },
        ],
        accreditation_banner: [
          {
            required: true,
            message: "请选择证件轮播图",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getImg(src) {
      this.formData.accreditation_banner = src;
    },
    getCoverImg(src) {
      this.formData.accreditation_cover = src;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const { data } = this.detailId
        ? await AccreditationEdit(this.formData)
        : await AccreditationAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      AccreditationDetail({ accreditation_content_id: this.detailId }).then(
        (res) => {
          if (res.data.code == 1) {
            let resData = res.data.data;
            delete resData.create_time;
            delete resData.accreditation_sales;
            this.formData = res.data.data;
            this.formData["accreditation_content_id"] = this.detailId;
            this.showCont = true;
          }
        }
      );
    },
  },
  mounted() {},
  created() {
    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>发布办证</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" ref="ruleForm" :model="formData">
          <div class="flexCont" v-if="showCont">
            <el-form-item
              class="flexPull"
              label="证件封面"
              label-width="120"
              prop="accreditation_cover"
            >
              <defUpImg
                :propImg="formData.accreditation_cover"
                @ok="getCoverImg"
              ></defUpImg>
            </el-form-item>
            <el-form-item
              label="证件名称"
              label-width="120"
              prop="accreditation_name"
            >
              <el-input
                clearable
                placeholder="请输入证件名称"
                v-model="formData.accreditation_name"
              />
            </el-form-item>
            <el-form-item
              label="办证价格"
              label-width="120"
              prop="accreditation_money"
            >
              <el-input
                clearable
                placeholder="请输入办证"
                v-model="formData.accreditation_money"
                ><template #append>元</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="预计出证时间"
              label-width="120"
              prop="accreditation_czsj"
            >
              <el-input
                clearable
                placeholder="请输入预计出证时间(例：10-15天)"
                v-model="formData.accreditation_czsj"
              />
            </el-form-item>
            <el-form-item label=" " label-width="120"> </el-form-item>
            <el-form-item
              label="适用船员范围"
              label-width="120"
              prop="accreditation_sycyfw"
            >
              <el-input
                v-model="formData.accreditation_sycyfw"
                maxlength="3000"
                placeholder="请输入适用船员范围"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              label="办理要求"
              label-width="120"
              prop="accreditation_blyq"
            >
              <el-input
                v-model="formData.accreditation_blyq"
                maxlength="3000"
                placeholder="请输入办理要求"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              label="所需材料"
              label-width="120"
              prop="accreditation_sxcl"
            >
              <el-input
                v-model="formData.accreditation_sxcl"
                maxlength="3000"
                placeholder="请输入所需材料"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              label="取证方式"
              label-width="120"
              prop="accreditation_qzfs"
            >
              <el-input
                v-model="formData.accreditation_qzfs"
                maxlength="3000"
                placeholder="请输入取证方式"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="轮播图"
              label-width="120"
              prop="accreditation_banner"
            >
              <upMoreImg
                :propImgs="formData.accreditation_banner"
                @ok="getImg"
              ></upMoreImg>
            </el-form-item>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn value="确认发布" @ok="saveFn"></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
